import '@babel/polyfill';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import gsap from 'gsap';
import * as dat from 'dat.gui';
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import vertexShader from '../shader/1/vertex.glsl';
import fragmentShader from '../shader/1/fragment.glsl';
import { Water } from 'three/examples/jsm/objects/Water2';
import Fireworks from './fireworks.js';

//场景
const scene = new THREE.Scene();

//相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 200);
camera.position.set(5, 5, 10);
scene.add(camera);

//渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.toneMapping = THREE.ACESFilmicToneMapping;//电影色调映射
renderer.toneMappingExposure = 0.3;//映射曝光
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

//textureload
const rgbLoader = new RGBELoader();
rgbLoader.loadAsync('./assets/2k.hdr').then((texture) => {
    texture.mapping = THREE.EquirectangularReflectionMapping;
    scene.background = texture;
});

//meshload
const gltfLoader = new GLTFLoader();
gltfLoader.load('./assets/model/flyLight.glb', (gltf) => {
    //console.log(gltf);
    gltf.scene.children[0].material = material;
    for (let i = 0; i < 200; i++) {
        const flyLight = gltf.scene.clone();
        flyLight.position.x = (Math.random() - 0.5) * 300;
        flyLight.position.y = Math.random() * 100;
        flyLight.position.z = Math.random() * 300 - 150;
        scene.add(flyLight);
        gsap.to(flyLight.rotation, {
            y: Math.PI,
            duration: Math.random() * 10 + 3,
            repeat: -1,
            ease: 'none',
        });
        gsap.to(flyLight.position, {
            y: '+=' + Math.random() * 20 + 10,
            duration: Math.random() + 5,
            repeat: -1,
            yoyo: true,
            ease: 'none',
        });
    };
});
gltfLoader.load('./assets/model/newyears_min.glb', (gltf) => {
    scene.add(gltf.scene);
    const waterGeometry = new THREE.PlaneGeometry(100, 100);
    const water = new Water(waterGeometry, {
        scale: 4,
        textureWidth: 1024,
        textureHeight: 1024
    });
    water.rotateX(-Math.PI / 2);
    water.position.y = 0.5;
    scene.add(water);
})

const material = new THREE.ShaderMaterial({
    vertexShader: vertexShader,
    fragmentShader: fragmentShader,
    side: THREE.DoubleSide,
});

//控制
const orbitControls = new OrbitControls(camera, renderer.domElement);
orbitControls.enableDamping = true;

// orbitControls.autoRotate = true;
// orbitControls.autoRotateSpeed = 0.2;
// orbitControls.minPolarAngle = Math.PI * 0.5;
// orbitControls.maxPolarAngle = Math.PI * 0.85;

//坐标轴
//const axesHelper = new THREE.AxesHelper(5);
//scene.add(axesHelper);

const fireworks = [];
//帧动画
function animate() {
    fireworks.forEach((item, index) => {
        let result = item.update();
        if (result == 'remove') {
            fireworks.splice(index, 1);
        }
    });
    orbitControls.update();
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
};
animate();

//窗口调整侦听
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(window.devicePixelRatio);
});


const createFireWorks = function () {
    let color = `hsl(${Math.floor(Math.random() * 360)},100%,80%)`;
    let position = {
        x: (Math.random() - 0.5) * 30,//-15~15
        z: -Math.random() * 20,//-20~0
        y: Math.random() * 15 + 13,//13~28
    };
    console.log('click');
    const firework = new Fireworks(color, position);
    firework.sceneAddobj(scene);
    fireworks.push(firework);
};
window.addEventListener('click', createFireWorks);



